<template>
    <div>
        <div>用户名：<el-input v-model="form.username" style="width:300px;"></el-input></div>
        <div>密码：<el-input v-model="form.password" style="width:300px;"></el-input></div>
        <div>验证码：<el-input style="width:200px"></el-input> <span
            style="    background: #ffccaa;
    padding: 10px 10px;
    border-radius: 5px;
    letter-spacing: 3px;
    cursor: pointer;"  @click="loadCode" >{{ showCode }}</span></div>
        <div><el-button type="danger" @click="eventLogin">登录</el-button></div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            showCode:'',
            form:{
                username:'',
                password:''
            }
        }
    },
    mounted(){
        this.loadCode()
    },
    methods: {
        //登录事件
        eventLogin() {
            let url = 'http://localhost:5262/system/user/login'
            let data = {
                "userName": this.form.username,
                "password": this.form.password
            }
            this.$http.post(url, data).then(res => {
                //console.log(res);
                if (res.data.code == 200) {

                    //localStorage.setItem("vue-2104a-login-info", JSON.stringify( res.data.result ))

                    this.$cookies.set('2104a-login-info',res.data.result,'1H')

                    this.$message.success(res.data.message)
                    //console.log('进行页页跳转');

                    this.$router.push('/default')
                }else{
                    this.$message.error(res.data.message)
                }
            })
        },
        loadCode(){
            let url='http://localhost:5262/system/user/code?p=4'
            this.$http.get(url).then(res=>{
                if(res.data.code == 200){
                    this.showCode = res.data.result
                }
            })
        }
    }
}
</script>